<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="./css/elementui.css" />
		<link rel="stylesheet" href="./css/style.css" />
		<title>Agent配置页面</title>
	</head>
	<body>
		<div id="app">
			<el-container class="sw_agent_container">
				<el-aside :width="isExpand ? '240px' : '0'" class="sw_agent_aside">
					<div class="header">
						<i class="icon" :style="{backgroundColor: siteData.icon_background}">{{siteData.icon}}</i>
						<h2>{{siteData.title}}</h2>
						<el-button type="text" icon="el-icon-s-fold" @click="handleChatAside"></el-button>
					</div>
					<el-button size="medium" class="added" icon="el-icon-edit-outline" @click="handleAddedChat">开启新对话</el-button>
					<el-scrollbar>
						<div class="item">
							<h4></h4>
						</div>
					</el-scrollbar>
					<div class="bottom">
						<el-dropdown size="medium" @command="handleCommandSetting">
							<el-button type="text" class="setting" icon="el-icon-s-operation"></el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="about">关于</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<h4>Powered by</h4>
						<img src="./img/logo.png" />
					</div>
				</el-aside>
				<el-main class="sw_agent_mainbox">
					<div class="header">
						<div class="btn">
							<el-button type="text" icon="el-icon-refresh-left"></el-button>
							<el-popover placement="bottom-end" title="新对话设置" width="400" popper-class="agent_popover_class">
								<el-button slot="reference" type="text" icon="el-icon-setting"></el-button>
								<el-form size="small" label-position="top">
									<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label">
										<template v-if="item.type === 'select'">
											<el-select v-model="settings[item.variable]" :placeholder="item.label" disabled style="width: 100%;">
												<el-option v-for="(n, i) in item.options" :label="n" :value="n"></el-option>
											</el-select>
										</template>
										<template v-if="item.type === 'text-input'">
											<el-input v-model="settings[item.variable]" placeholder="课程名称"></el-input>
										</template>
									</el-form-item>
								</el-form>
							</el-popover>
						</div>
						<div class="box" v-if="!isExpand">
							<el-button type="text" icon="el-icon-s-unfold" @click="handleChatAside"></el-button>
							<i class="icon" :style="{backgroundColor: siteData.icon_background}">{{siteData.icon}}</i>
							<span v-if="isNewChat">/</span>
							<el-dropdown size="medium" @command="handleCommandOperate" v-if="isNewChat">
								<el-button type="text" class="setting">
									阿斯达萨达
									<i class="el-icon-arrow-down"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="rename">重命名</el-dropdown-item>
									<el-dropdown-item command="delete">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<h2 v-if="!isNewChat">课程知识问答（阿斯达斯）</h2>
							<el-divider direction="vertical"></el-divider>
							<el-button type="text" icon="el-icon-edit-outline" @click="handleAddedChat"></el-button>
						</div>
					</div>
					<el-scrollbar>
						<el-card class="agent_chat_setting">
							<template slot="header">
								<span>新对话设置</span>
								<el-button type="text">EDIT</el-button>
							</template>
							<el-form size="medium" label-position="top">
								<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label">
									<template v-if="item.type === 'select'">
										<el-select v-model="settings[item.variable]" :placeholder="item.label" style="width: 100%;">
											<el-option v-for="(n, i) in item.options" :label="n" :value="n"></el-option>
										</el-select>
									</template>
									<template v-if="item.type === 'text-input'">
										<el-input v-model="settings[item.variable]" placeholder="课程名称"></el-input>
									</template>
								</el-form-item>
								<el-form-item>
									<el-button type="primary">开始对话</el-button>
								</el-form-item>
							</el-form>
						</el-card>
						<div class="agent_chat_content" v-if="contents.length > 0">
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
							<div class="question">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">1123123123123</div>
							</div>
							<div class="answer">
								<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
								<div class="text">asdalkjsdkajsdlkasjda</div>
							</div>
						</div>
					</el-scrollbar>
					<div class="bottom">
						<el-input size="medium" placeholder="Talk to Bot"></el-input>
						<el-button type="primary"></el-button>
					</div>
				</el-main>
			</el-container>
		</div>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript" src="./js/axios.min.js"></script>
		<script type="text/javascript" src="./js/elementui.min.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						siteData: {
							"title": "课程知识问答（模板）",
							"chat_color_theme": null,
							"chat_color_theme_inverted": false,
							"icon_type": "emoji",
							"icon": "🤖",
							"icon_background": "#FFEAD5",
							"icon_url": null,
							"description": null,
							"copyright": null,
							"privacy_policy": null,
							"custom_disclaimer": "",
							"default_language": "en-US",
							"prompt_public": false,
							"show_workflow_steps": true,
							"use_icon_as_answer_icon": false
						},
						contents: [],
						settings: {},
						isNewChat: false,
						expandStatus: window.localStorage.getItem('webappSidebarCollapse')
					}
				},
				computed: {
					isExpand() {
						return this.expandStatus === 'collapsed' ? false : true
					},
					formItems() {
						return user_input_form.map(item => Object.values(item)[0]);
					}
				},
				mounted() {
					/* axios.get('/api/site').then(res => {
						console.log(res);
					}) */
				},
				methods: {
					handleChatAside: handleChatAside,
					handleAddedChat: handleAddedChat,
					handleCommandSetting: handleCommandSetting
				}
			})
		</script>
	</body>
</html>